<template>
    <div class="header">
        <mt-header :title="title" fixed>
            <router-link to="" slot="left" v-show="$route.meta.back && back">
                <mt-button icon="back" @click.native="$router.back(-1)">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right" v-show="$route.name == 'goods'" @click="showMeal = !showMeal"></mt-button>
        </mt-header>
        <mt-popup
            v-model="popupVisible"
            position="top"
            :modal="false"
            >
            <p class="alert_box" @click="hidePopup">食品安全档案认证未通过，请点击食品安全信息档案重新提交认证</p>
        </mt-popup>
        <!-- <mt-popup
        v-model="showMeal"
        position="top">
        ...
        </mt-popup> -->
        <mt-actionsheet
            :actions="actions"
            v-model="showMeal">
        </mt-actionsheet>
    </div>
</template>
<script>
export default {
    props:["title"],
    name:"Header",
    data() {
        return {
            popupVisible:false,
            showMeal:false,
            actions:[{name:'套餐设置',method:this.setMeal}]
        }
    },
    created(){
        console.log(this.$store.getters.userInfo.status)
        if(this.$store.getters.userInfo.status == 2){
            this.popupVisible = true
        }
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if(isiOS){
                //ios系统输出
                this.back = false;
            }else{
                //android系统输出
                this.back = true;
            }
        // console.log(this.$route);
    },
    methods:{
        hidePopup(){
            console.log(1);
            this.popupVisible = !this.popupVisible
        },
        setMeal(){
            this.$router.push('/mealSetting');
        },
    }
}
</script>
<style scoped>
    .header {
        height: 3rem;
    }
    .mint-header {
        height: 3rem;
        background-color:#fff;
        font-size: 1rem;
        color: #333;
    }
    .mintui {
        font-size: 1rem;
    }
    .mint-popup{
        background: #3336;
    }
    .alert_box{
        font-size: 0.8rem;
        line-height: 4rem;
        text-align: center;
        color: #fff;
    }
</style>